<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>分类参数</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-alert title="注意:只允许为第三级分类设置相关参数" type="warning" show-icon :closable="false">
			</el-alert>
			<!-- 选择商品分类区域 -->
			<el-row class="cat_opt">
				<el-col>
					<span>选择商品分类：</span>
					<!--  选择商品分类的级联选择框-->
					<el-cascader v-model="selectCateIds" :options="catelist" :props="cateProps" @change="CateChanged"
					 clearable></el-cascader>
				</el-col>
			</el-row>
			<!-- tab页签区域 -->
			<el-tabs v-model="activeName" @tab-click="handleTabClick">
				<!--动态参数  -->
				<el-tab-pane label="动态参数" name="many">
					<!-- 添加动态参数的面板 -->
					<el-button type="primary" size="mini" :disabled="isBtnDisable" @click="addmanydialogVisible =true">添加参数</el-button>
					<!-- 动态参数表格 -->
					<el-table :data="manyList" border stripe>
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleClosed(i,scope.row)">{{item}}</el-tag>
								<!-- 输入文本框 -->
								<el-input size="small" class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput"
								 @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="buttn-new-tag" size="small" @click="showInput(scope.row)">+New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>
								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<!-- 静态属性 -->
				<el-tab-pane label="静态属性" name="only">
					<!-- 添加静态属性的面板 -->
					<el-button type="primary" size="mini" :disabled="isBtnDisable" @click="addmanydialogVisible =true">添加属性</el-button>
					<!-- 静态属性表格 -->
					<el-table :data="onlyList" border stripe>
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-tag v-for="(item,i) in scope.row.attr_vals" :key="i" closable @close="handleClosed(i,scope.row)">{{item}}</el-tag>
								<!-- 输入文本框 -->
								<el-input size="small" class="input-new-tag" v-if="scope.row.inputVisible" v-model="scope.row.inputValue" ref="saveTagInput"
								 @keyup.enter.native="handleInputConfirm(scope.row)" @blur="handleInputConfirm(scope.row)"></el-input>
								<!-- 添加的按钮 -->
								<el-button v-else class="buttn-new-tag" size="small" @click="showInput(scope.row)">+New Tag</el-button>
							</template>
						</el-table-column>
						<!-- 索引列 -->
						<el-table-column type="index" label="#"></el-table-column>
						<el-table-column label="参数名称" prop="attr_name"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button>

								<el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<!-- 添加参数对话框 -->
		<el-dialog :title="'添加'+TilteText" :visible.sync="addmanydialogVisible" width="50%" @close="paramsClosed">
			<el-form :model="addmanyForm" :rules="addmanyFormRules" ref="addmanyFormRef" label-width="120px">
				<el-form-item :label="TilteText" prop="attr_name">
					<el-input v-model="addmanyForm.attr_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addmanydialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addParams">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 编辑参数对话框 -->
		<el-dialog :title="'修改'+TilteText" :visible.sync="editmanydialogVisible" width="50%" @close="editparamsClosed">
			<el-form :model="editmanyForm" :rules="editmanyFormRules" ref="editmanyFormRef" label-width="120px">
				<el-form-item :label="TilteText" prop="attr_name">
					<el-input v-model="editmanyForm.attr_name"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editmanydialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editParams">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//商品分类列表
				catelist: [],
				//级联选择框配置对象
				cateProps: {
					value: 'cat_id',
					label: 'cat_name',
					children: 'children'
				},
				//级联选择框双向绑定数组
				selectCateIds: [],
				activeName: 'many',
				manyList: [],
				onlyList: [],
				//控制对话框关闭
				addmanydialogVisible: false,
				editmanydialogVisible: false,
				addmanyForm: {
					attr_name: ''
				},
				addmanyFormRules: {
					attr_name: [{
						required: true,
						message: '请输入参数',
						trigger: 'blur'
					}]
				},
				editmanyForm: {
					attr_name: ''
				},
				editmanyFormRules: {
					attr_name: [{
						required: true,
						message: '请输入参数',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getCateList()
		},
		methods: {
			//tab页签点击事件
			handleTabClick() {
				console.log(this.activeName)
				this.getmanytList()
			},
			//获取所有商品分类
			async getCateList() {
				const {
					data: res
				} = await this.$http.get('categories')
				if (res.meta.status !== 200) {
					return this.$message.error('获取商品分类失败')
				}
				this.catelist = res.data
				console.log(this.catelist)
			},
			//级联选择框发生变化，会触发
			CateChanged() {
				this.getmanytList()

			},
			//获取参数列表数据
			async getmanytList() {
				//证明选中的不是三级分类
				if (this.selectCateIds.length !== 3) {
					this.selectCateIds = []
					this.manyList = []
					this.onlyList = []
					return
				}
				console.log(this.selectCateIds)
				//根据所选分类的id,和当前所处的面变，获取相关参数或属性
				const {
					data: res
				} = await this.$http.get(`categories/${this.CateId}/attributes`, {
					params: {
						sel: this.activeName
					}
				})
				if (res.meta.status !== 200) {
					return this.$message.error('获取分类参数失败！')
				}
				res.data.forEach(item => {

					item.attr_vals =
						item.attr_vals ?
						item.attr_vals.split(',') : []
					//控制按钮与文本框的切换显示
					item.inputVisible = false,
						//文本框输入内容
						item.inputValue = ''
				})
				console.log(res.data)
				if (this.activeName === 'many') {
					this.manyList = res.data
				} else {
					this.onlyList = res.data
				}
			},
			//监听对话框清空
			paramsClosed() {
				this.$refs.addmanyFormRef.resetFields()
			},
			editparamsClosed() {
				this.$refs.editmanyFormRef.resetFields()
			},
			//添加
			addParams() {
				this.$refs.addmanyFormRef.validate(async vail => {
					if (!vail) return
					const {
						data: res
					} = await this.$http.post(`categories/${this.CateId}/attributes`, {
						attr_name: this.addmanyForm.attr_name,
						attr_sel: this.activeName
					})
					if (res.meta.status !== 201) {
						return this.$message.error('新增参数失败！')
					}
					this.$message.success('新增参数成功！')
					this.addmanydialogVisible = false
					this.getmanytList()
				})
			},
			//编辑
			async showEditDialog(attr_id) {
				//查询当前参数信息
				const {
					data: res
				} = await this.$http.get(`categories/${this.CateId}/attributes/${attr_id}`, {
					params: {
						attr_sel: this.activeName
					}
				})
				if (res.meta.status !== 200) {
					return this.$message.error('请求参数信息失败！')
				}
				this.editmanyForm = res.data
				this.editmanydialogVisible = true
			},
			//点击按钮修改
			editParams() {
				this.$refs.editmanyFormRef.validate(async vail => {
					if (!vail) return
					const {
						data: res
					} = await this.$http.put(`categories/${this.CateId}/attributes/${this.editmanyForm.attr_id}`, {
						attr_name: this.editmanyForm.attr_name,
						attr_sel: this.activeName
					})
					if (res.meta.status !== 200) {
						return this.$message.error('修改参数信息失败！')
					}
					this.$message.success('修改参数信息成功！')
					this.getmanytList()
					this.editmanydialogVisible = false
				})
			},
			//删除
			async removeParams(attr_id) {
				/* 弹框询问是否删除 */
				const delresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				//如果用户确认删除，返回字符串confirm
				//如果用户取消删除，返回字符串cancel
				/* console.log(delresult) */
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消删除！')
				}
				/* console.log('确认删除') */
				const {
					data: res
				} = await this.$http.delete(`categories/${this.CateId}/attributes/${attr_id}`)
				if (res.meta.status !== 200) {
					this.$message.error('删除参数失败!')
				}
				this.$message.success('删除参数成功!')
				//重新获取用户列表
				this.getmanytList()
			},
			//文本框失去了焦点，或摁下enter键
			async handleInputConfirm(row) {
				if (row.inputValue.trim().length === 0) {
					row.inputValue = ''
					row.inputVisible = false
					return
				}
				//如果没有return,则证明需要做后续处理
				row.attr_vals.push(row.inputValue.trim())
				row.inputValue = ''
				row.inputVisible = false
				this.saveAttrValus(row)
			},
			//点击按钮，展示文本输入框
			showInput(row) {
				row.inputVisible = true
				//让文本框自动获得焦点
				//$nextTick当页面上的元素被重新渲染之后，才会执行回调函数中的代码
				this.$nextTick(_ => {
					this.$refs.saveTagInput.$refs.input.focus()
				})
			},
			//将对attr_vals的初衷，保存到数据库
			async saveAttrValus(row) {
				const {
					data: res
				} = await this.$http.put(`categories/${this.CateId}/attributes/${row.attr_id}`, {
					attr_name: row.attr_name,
					attr_sel: row.attr_sel,
					attr_vals: row.attr_vals.join(',')
				})
				if (res.meta.status !== 200) {
					return this.$message.error('修改参数失败!')
				}
				this.$message.success('修改参数成功!')
			},
			//删除对应参数可选项
			handleClosed(i, row) {
				row.attr_vals.splice(i, 1)
				this.saveAttrValus(row)
			}
		},
		computed: {
			//如果按钮被禁用，返回true,否则反之
			isBtnDisable() {
				if (this.selectCateIds.length !== 3) {
					return true
				}
				return false
			},
			//当前选中的三级分类的id
			CateId() {
				if (this.selectCateIds.length === 3) {
					return this.selectCateIds[2]
				}
				return null
			},
			//动态计算标题的文本
			TilteText() {
				if (this.activeName === 'many') {
					return '动态参数'
				}
				return '静态属性'
			}
		}
	}
</script>

<style lang="less" scoped>
	.cat_opt {
		margin: 15px 0;
	}

	.el-tag {
		margin: 10px;
	}

	.input-new-tag {
		width: 120px;
	}
</style>
